<template>
  <div class="friends box bg">
    <div class="backbox">
      <img
        src="@/assets/img/back.png"
        class="goback"
        @click="$router.replace({ path: '/index', query: { intxt: 'back' } })"
      />
    </div>
    <div class="friendcontain clmstart">
      <div class="yqbox clmstart">
        <div class="ybox boxtitle">
          <div class="yqprogress">
            <p>
              已经邀请到<span>{{ ivtinfo.friendsNums }}</span
              >位好友了，获得<span>{{ ivtinfo.points }}</span
              >积分
            </p>
            <p>(上限250积分)</p>
          </div>
        </div>
        <div class="ybox boxcont clmstart">
          <p class="yqtitle">分享页面，让更多好友参与吧!</p>
          <div class="friendlistbox">
            <div
              class="fditem"
              v-for="item in ivtinfo.friendsHeadimgs"
              :key="item"
            >
              <img :src="item" />
            </div>
            <div class="fditem" @click="tipshow = true">
              <img src="@/assets/img/addbox.png" />
            </div>
          </div>
        </div>
      </div>
      <div class="yqbtnbox btnani" @click="tipshow = true">
        <img src="@/assets/img/yqbtn.png" />
      </div>
    </div>
    <!-- 分享 -->
    <div class="tkbox sharetipbox" v-show="tipshow" @click="tipshow = false">
      <img src="@/assets/img/sharetips.png" />
    </div>
  </div>
</template>
<script>
import { Toast } from "vant";
export default {
  data() {
    return {
      tipshow: false,
      ivtinfo: {
        friendsNums: 0,
        points: "0",
        friendsHeadimgs: [],
      },
    };
  },
  created() {
    this.getUserInviteInfo();
  },
  methods: {
    getUserInviteInfo() {
      Toast.loading({
        message: "loading...",
        forbidClick: true,
        duration: 0, //值为 0 时，toast 不会消失
        overlay: true, //是否显示背景遮罩层
      });
      this.$http.post("/getUserInviteInfo").then((res) => {
        Toast.clear();
        if (res.data.code === 200) {
          this.ivtinfo = res.data.data;
        } else {
          Toast(res.data.msg);
        }
      });
    },
  },
};
</script>
<style lang="less" scoped>
.friends {
  overflow-y: scroll;
  .friendcontain {
    position: relative;
    width: 100%;
    height: auto;
    margin-top: 9rem;
    .yqbox {
      margin-top: 2rem;
      width: 727px;
      height: 1010px;
      background: url("@/assets/img/yqbg.png") no-repeat;
      background-size: 100% 100%;
      .ybox {
        width: 85%;
        margin-left: 4px;
      }
      .boxtitle {
        height: 126px;
        margin-top: 7.5rem;
        .yqprogress {
          width: 100%;
          text-align: center;
          p {
            margin: 0;
            color: #000;
            font-size: 2rem;
            font-family: "AlibabaPuHuiTi-2-85-Bold";
            line-height: 50px;
            letter-spacing: 2px;
            span {
              color: #e60012;
              font-size: 2.5rem;
              line-height: 70px;
            }
          }
        }
      }
      .boxcont {
        height: 650px;
        margin-top: 6rem;
        .yqtitle {
          font-family: "AlibabaPuHuiTi-2-85-Bold";
          font-size: 2.2rem;
          letter-spacing: 2px;
        }
        .friendlistbox {
          margin-top: 1.5rem;
          width: 570px;
          height: calc(100% - 1.5rem - 49px);
          overflow-y: scroll;
          display: grid;
          grid-template-rows: repeat(auto-fill, 135px);
          grid-template-columns: repeat(4, 116px);
          place-content: start space-between;
          grid-row-gap: 3rem;
          .fditem {
            width: 116px;
            height: 135px;
            border-radius: 1rem;
            overflow: hidden;
            img {
              width: 100%;
              height: 100%;
              object-fit: cover;
            }
          }
        }
      }
    }
    .yqbtnbox {
      width: 379px;
      height: 78px;
      overflow: hidden;
      margin-top: 3rem;
      margin-bottom: 4rem;
      img {
        width: 100%;
      }
    }
  }
  //  分享提示
  .sharetipbox {
    img {
      position: absolute;
      top: 1rem;
      right: 0;
      width: 57%;
    }
  }
}
</style>
